<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>鲜知校园-登录</title>
    <link rel="stylesheet" href="/static/front/common/css/reset.css" />
    <link rel="stylesheet" href="/static/front/css/login.css?ver=1" />
    <link rel="stylesheet" href="/static/layer_mobile/need/layer.css" />
    <script src="/static/front/common/js/jquery-1.12.4.min.js"></script>
    <script src="/static/layer_mobile/layer.js"></script>
    <style>
        .keep-on-record {
            position: relative;
            width: 60vw;
            color: #ffffff;
            left: 50vw;
            margin-left: -30vw;
            top: 15vh;
        }
        .keep-on-record a {
            color: #ffffff;
        }
        .keep-on-record .num {
            text-align: center;
        }
        .keep-on-record .copyright {
            text-align: center;
            margin-top: 1vh;
        }
        .container .title {
            bottom: 12vh !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="logo_div">
            <img src="/static/front/img/login_logo.png" alt="">
            <p class="logo_name">鲜知校园</p>
        </div>
        <div class="content">
            <form id="data-form">
                {{.xsrfdata}}
                <ul>
                    <li style="margin-bottom:25px;">
                        <label for="">手机号:</label>
                        <input type="number" maxlength="11" id="phone" name="phone">
                    </li>
                    <li>
                        <label for="">密码:</label>
                        <input type="password" id="password" name="password">
                    </li>
                </ul>
            </form>
            <div class="opera">
                <a href="{{urlfor "controllers.UserController.FindPassword"}}">忘记密码</a>
                <a href="{{urlfor "controllers.UserController.Register"}}">注册账号</a>
            </div>
        </div>
        <div class="submit">
            <img src="/static/front/img/submit.jpg" alt="">
        </div>
        <div class='title'>
            新鲜大学早知道
        </div>
        <div class="keep-on-record">
            <div class="num"><a href="http://beian.miit.gov.cn">豫ICP备19045779号</a></div>
            <div class="copyright">河南省闪光文化传媒有限公司 版权所有</div>
        </div>
    </div>

</body>

<script type="text/javascript">

    var canSubmit = true,
        mobileReg = reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;

    $(function () {

        $(".submit").click(function () {

            var phone = $('#phone').val(),
                password = $('#password').val();

            if (phone.length <= 0) {
                layer.open({content: '请输入手机号', skin: 'msg', time: 2});
                return false;
            }
            if (!mobileReg.test(phone)) {
                layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
                return false;
            }
            if (password.length <= 0) {
                layer.open({content: '请输入密码', skin: 'msg', time: 2});
                return false;
            }

            if (!canSubmit) return false;
            var loadIndex = layer.open({type: 2});
            canSubmit = false;

            $.ajax({
                url: '{{urlfor "controllers.UserController.DoLogin"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                dataType: 'json',
                success: function (res) {

                    canSubmit = true;
                    layer.close(loadIndex);

                    layer.open({content: res.msg, skin: 'msg', time: 2});
                    if (res.status == 1) {
                        setTimeout(function () {
                            location.href = '{{urlfor "controllers.IndexController.Index"}}';
                        }, 1000);
                    }

                }
            });

        });

    });

</script>

</html>